<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/static/img/logo/favicon.ico" />
    <link type="text/css" rel="stylesheet" href="/static/css/code.css"/>
    <link rel="stylesheet" href="/static/assets/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/footer.css">
    <link rel="stylesheet" href="/static/css/header.css">
    <!-- 插件：点击图片进行预览 -->
    <link rel="stylesheet" href="/static/assets/plugins/zoom/zoom.css">

    <style>
        #image {
            max-width: 50%;
            height: auto;

        }

        #image_review {
            max-width: 5%;
            height: 5%;
            border-radius: 50%;
        }

        .avatar2 {
            width: 40px;
            height: 40px;

        }
    </style>
</head>
</head>

<body>
    {% include 'header.html' %}
    <div class="container">

        <!-- 内容 -->
        <div class="row">

            <!-- 帖子信息 -->
            <div class="span12 gallery-single">

                <div class="row" style="margin-bottom: 0">
                    <div class="span6">
                        <h2>{{ t_title }}</h2>
                        <div class="avatar avatar2" style="float: left; background-color: #f55946;">
                            <a href="#" class="text-white" style="text-decoration: none;">
                                <img class="avatar avatar2 img-thumbnail" src="{{ t_uavatar }}" alt="{{ t_uid}}">
                            </a>
                        </div>
                        <br>
                        <p>{{ t_uid}} 于 {{ t_time }} 发布</p>
                        <p class="lead">{{ t_introduce }}</p>
                        <p>{{ t_content|safe }} </p>
                    </div>
                    <!-- <div container>
                        <img id="image" src="{{ t_photo }}" class=" mx-auto d-block img-fluid img-thumbnail "
                            alt="image" data-action="zoom">
                    </div> -->
                </div>

            </div>

        </div>
        
        <p class=" mb-3">
            {% if t_like_type == 'no' %}
            <img iddd="{{ tid }}" alt="+1" style="width: 20px;" class="like" src="/static/img/logo/hand-thumbs-up.svg">
            <span class="reactions-count ">{{t_like}}</span>
            <img iddd="{{ tid }}" alt="-1" style="width: 20px;" class="dislike"
                src="/static/img/logo/hand-thumbs-down.svg">
            <span class="reactions-count ">{{t_dislike}}</span>
            {% elif t_like_type %}
            <img iddd="{{ tid }}" alt="+1" style="width: 20px;" class="like"
                src="/static/img/logo/hand-thumbs-up-fill.svg">
            <span class="reactions-count ">{{t_like}}</span>
            <img iddd="{{tid}}" alt="-1" style="width: 20px;" class="dislike"
                src="/static/img/logo/hand-thumbs-down.svg">
            <span class="reactions-count ">{{t_dislike}}</span>
            {% else %}
            <img iddd="{{ tid }}" alt="+1" style="width: 20px;" class="like" src="/static/img/logo/hand-thumbs-up.svg">
            <span class="reactions-count ">{{t_like}}</span>
            <img iddd="{{ tid }}" alt="-1" style="width: 20px;" class="dislike"
                src="/static/img/logo/hand-thumbs-down-fill.svg">
            <span class="reactions-count ">{{t_dislike}}</span>
            {% endif %}
        </p>
        <h4>留言</h4>

        <div class="row">
            <form action="/single/{{ tid }}/" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="input-group mb-3">
                    <input required type="text" class="form-control" name="r_content" id="">
                    <!-- <input type="file" name="r_photo"> -->
                    <input class="btn btn-outline-secondary " type="submit" value="留言" style="float: right;">
                </div>

            </form>
        </div>

        <div class="row">
            <div class="span12 gallery-single">
                <div class="row">
                    <div class="span6" style="width: 100%;">
                        <ul class="project-info pe-3 " style="list-style-type: none;">
                            {% for r in reply_list %}
                            <li>
                                <div class="avatar avatar2" style="float: left; background-color: #f55946;">
                                    <a href="/home/" class="text-white" style="text-decoration: none;">
                                        <img class="avatar avatar2 img-thumbnail" src="{{ r.r_uavatar }}"
                                            alt="{{ t_uid}}">
                                    </a>
                                </div>
                                <br>{{ r.r_uid }}:
                                {{ r.r_content }} <br><br>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>






    </div>

    {% include 'footer.html' %}

    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/static/assets/plugins/jquery/jquery.js"></script>
    <!-- 插件：点击图片进行预览  -->
    <script src="/static/assets/plugins/zoom/zoom.js"></script>
    <script>
        $(document).ready(function () {
                $('.like').click(function () {
    
                        var tid = $(this).attr("iddd");
                        $.ajax({
                                url: '/like/',
                                type: "POST",
                                data: {
                                        'like': 'like',
                                        'tid': tid
                                },
                                beforeSend: function (xhr,
                                        settings) {
                                        xhr.setRequestHeader(
                                                "X-CSRFToken",
                                                "{{ csrf_token }}"
                                                ); // csrf
                                },
                                success: function (data) {
                                        if (data
                                                .result) {
                                                var n = $(
                                                                this)
                                                        .next()
                                                        .html();
                                                $(this).next()
                                                        .html(Number(
                                                                        n) +
                                                                1
                                                                );
                                                $(this).attr("src",
                                                        "/static/img/logo/hand-thumbs-up-fill.svg"
                                                        );
                                        } else {
                                                alert(data
                                                        .msg)
                                        }
                                }.bind(this)
                        });
                });
                $('.dislike').click(function () {
    
                        var tid = $(this).attr("iddd");
                        $.ajax({
                                url: '/like/',
                                type: "POST",
                                data: {
                                        'like': 'dislike',
                                        'tid': tid
                                },
                                beforeSend: function (xhr,
                                        settings) {
                                        xhr.setRequestHeader(
                                                "X-CSRFToken",
                                                "{{ csrf_token }}"
                                                ); // csrf
                                },
                                success: function (data) {
                                        if (data
                                                .result) {
                                                var n = $(
                                                                this)
                                                        .next()
                                                        .html();
                                                $(this).next()
                                                        .html(Number(
                                                                        n) +
                                                                1
                                                                );
                                                $(this).attr("src",
                                                        "/static/img/logo/hand-thumbs-down-fill.svg"
                                                        );
                                        } else {
                                                alert(data
                                                        .msg)
                                        }
                                }.bind(this)
                        });
                });
    
    
        });
    </script>
    <script>

        function deleter(ths) {
            var rid = $(ths).attr("iddd");
            $.ajax({
                url: window.location.href,
                type: "POST",
                data: {
                    'type': 'delete',
                    'r_id': rid
                },
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}"); // csrf
                },
                success: function (data) {
                    // data是服务器端返回的字符串
                    var dic = JSON.parse(data)
                    if (!dic.status) alert(JSON.parse(data).msg);
                    else window.location.href = window.location.href;
                }
            });
        }
    </script>
</body>

</html>